<template>
  <div class="main-container">
    <el-row>
      <el-table
        class="data-view-table"
        :data="tableData"
        v-loading="loading"
        border
        style="width: 100%"
      >
        <el-table-column fixed prop="createDate" label="日期" width="200"></el-table-column>
        <el-table-column prop="id" label="报表编号" width="200"></el-table-column>
        <el-table-column prop="name" label="报表名称" width="700"></el-table-column>
        <el-table-column prop="type" label="报表类型" width="200"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)">查看</el-button>
            <el-button style="color: red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog title="图表" :visible.sync="dialogVisible" width="30%">
      <div id="data-chart" style="width: 100%;height:450px;"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as request from "@net";

export default {
  methods: {
    handleClick(row) {
      //跳转报表链接
      // window.open(this.tableData[index].link, "_blank");
      this.dialogVisible = true;
      setTimeout(() => {
        this.drawChart(row);
      }, 0);
    },
    getOption(task) {
      var data = JSON.parse(task.data);
      var keys = Object.keys(data);
      var values = Object.values(data);
      if (task.chartType === "bar") {
        return {
          title: {
            text: task.name + "结果"
          },
          tooltip: {},
          xAxis: {
            data: keys
          },
          yAxis: {},
          series: [
            {
              name: "次数",
              type: "bar",
              data: values
            }
          ]
        };
      } else if (task.chartType === "pie") {
        return {
          title: {
            text:
              task.name +
              "转换比" +
              ((values[0] / values[1]) * 100 || 0).toFixed(1) +
              "%",
            x: "left"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: "vertical",
            left: "left",
            data: values
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: "55%",
              center: ["50%", "60%"],
              data: Object.entries(data).map(entry => {
                return {
                  name: entry[0],
                  value: entry[1]
                };
              }),
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        };
      } else if (task.chartType === "funnel") {
        var totalValue = eval(values.join("+"));
        return {
          title: {
            // text: "漏斗图",
            subtext: task.name + "结果"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c}%"
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          legend: {
            data: keys
          },
          calculable: true,
          series: [
            {
              name: "漏斗图",
              type: "funnel",
              left: "10%",
              top: 60,
              //x2: 80,
              bottom: 60,
              width: "80%",
              // height: {totalHeight} - y - y2,
              min: 0,
              max: 100,
              minSize: "0%",
              maxSize: "100%",
              sort: "descending",
              gap: 2,
              label: {
                show: true,
                position: "inside"
              },
              labelLine: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: "solid"
                }
              },
              itemStyle: {
                borderColor: "#fff",
                borderWidth: 1
              },
              emphasis: {
                label: {
                  fontSize: 20
                }
              },
              data: Object.entries(data).map(entry => {
                return {
                  name: entry[0],
                  value: ((entry[1] / totalValue) * 100).toFixed(2)
                };
              })
            }
          ]
        };
      } else if (task.chartType === "pie-rose") {
        return {
          title: {
            text: "南丁格尔玫瑰图",
            subtext: task.name + "结果",
            x: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          toolbox: {
            show: false,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: {
                show: true,
                type: ["pie"]
              },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          calculable: true,
          series: [
            {
              type: "pie",
              radius: [30, 110],
              roseType: "area",
              data: Object.entries(data).map(entry => {
                return {
                  name: entry[0],
                  value: entry[1]
                };
              })
            }
          ]
        };
      }
    },
    drawChart(task) {
      var myChart = this.$echarts.init(document.getElementById("data-chart"));
      myChart.clear();
      myChart.setOption(this.getOption(task));
    },
    fillTableData() {
      this.loading = true;
      request.getAllFinishTask(({ data }) => {
        this.tableData = data.map(
          ({ id, name, status, resultType, resultData, createDate }) => {
            return {
              id,
              name,
              status,
              type: this.chartType[resultType || "bar"],
              chartType: resultType || "bar",
              data: resultData,
              createDate
            };
          }
        );
        this.loading = false;
      });
    }
  },
  data() {
    return {
      loading: true,
      myChart: null,
      dialogVisible: false,
      tableData: [],
      chartType: {
        bar: "条形图",
        pie: "饼图",
        "pie-rose": "南丁格尔图",
        funnel: "漏斗图"
      }
    };
  },
  created() {
    this.fillTableData();
  }
};
</script>

<style>
</style>

